import React, {FC} from 'react'
import { Link,useNavigate } from 'react-router-dom'
import {LOGIN_PATHNAME} from '../router/index.tsx'
// import { useRequest } from 'ahooks'
// import { getUserInfoService } from '../service/user.ts'
import { UserOutlined } from '@ant-design/icons'
import { Button,message } from 'antd'
import { removeToken } from '../token/index.ts'
import useGetUserInfo from '../hooks/useGetUserInfo.ts'
import { useDispatch } from 'react-redux'
import { logoutReducer } from '../store/userReducer.ts'
const UserInfo: FC = ()=>{
    const nav = useNavigate()
    const dispatch = useDispatch()
    // 方式1--单独
    // const { data } = useRequest(getUserInfoService)
    // const { username, nickname } = data || {}

    // 方式2--store
    const { username, nickname } = useGetUserInfo() || {}

    const getOut = ()=>{
        nav('/login')
        removeToken()
        message.success('推出成功')
        dispatch(logoutReducer())  // 清空redux user数据
    }
    const Info = ( // 信息
    <div>
        <span style={{ color:'#e8e8e8' }}>
            <UserOutlined />
            {nickname}
        </span>
        <Button type="link" onClick={getOut}>退出</Button>
    </div>
    )
    
    const Login = ( // 登录
        <Link to={LOGIN_PATHNAME} >登录</Link>
    )

    return (
        <div>
            { username ?  Info : Login}
        </div>
    )
}

export default UserInfo


